<template>
  <div class="app">
    <div class="wrapper">
      <div class="panel">
        <div :class="['light', i === currentLight && item.color]" v-for="(item, i) in lights" :key="i"></div>
      </div>
      <div class="box">
        <div :class="['line', item, getTheme(tensDigit, i)]" v-for="(item, i) in classList" :key="item"></div>
      </div>
      <div class="box">
        <div :class="['line', item, getTheme(unitsDigit, i)]" v-for="(item, i) in classList" :key="item"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 当前是哪个灯的索引
const currentLight = ref(0)
const lights = [
  {
    duration: 10,
    color: 'green'
  },
  {
    duration: 3,
    color: 'yellow'
  },
  {
    duration: 5,
    color: 'red'
  },
]

// 读秒
const count = ref(lights[0].duration)

// 十位数
const tensDigit = computed(() => {
  const countStr = count.value.toString()
  if(count.value > 99) return 9
  else if(count.value >= 10) return Number(countStr.split('')[0])
  else return 0
})
// 个位数
const unitsDigit = computed(() => {
  const countStr = count.value.toString()
  if(count.value > 99) return 9
  else if(count.value >= 10) return Number(countStr.split('')[1])
  else return count.value
})

const classList = [
  'left-top', // 0
  'center-top', // 1
  'right-top',  // 2
  'center', // 3
  'left-bottom',  // 4
  'right-bottom', // 5
  'center-bottom' // 6
]

const mapNumber: {
  [key: number]: number[]
} = {
  0: [0, 1, 2, 4, 5, 6],
  1: [2, 5],
  2: [1, 2, 3, 4, 6],
  3: [1, 2, 3, 5, 6],
  4: [0, 2, 3, 5],
  5: [0, 1, 3, 5, 6],
  6: [0, 1, 3, 4, 5, 6],
  7: [1, 2, 5],
  8: [0, 1, 2, 3, 4, 5, 6],
  9: [0, 1, 2, 3, 5, 6]
}

const getTheme = computed(() => {
  return (target: number, i: number) => {
    // return 'active'
    return mapNumber[target].includes(i) ? lights[currentLight.value].color : undefined
  }
})

const timer: any = ref(null)

onMounted(() => {
  timer.value = setInterval(() => {
    if(count.value === 0) {
      if(lights.length === currentLight.value + 1) {
        // 最后一个
        currentLight.value = 0
        count.value = lights[0].duration
      } else {
        currentLight.value ++ 
        count.value = lights[currentLight.value].duration
      }
    } else {
      count.value --
    }
  }, 1000)
})

onUnmounted(() => {
  clearInterval(timer)
})

</script>

<style lang="scss" scoped>
$h: 10px;
$w: 100px;

.app {
  display: flex;
  height: 100vh;
}
.wrapper {
  display: flex;
  margin: auto;
  .panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 350px;
    padding: 0 20px;
    background-color: rgb(28, 24, 26);
    margin-right: 20px;
    .light {
      // flex: 1;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #acacac;
    }
  }
}
.box {
  width: $w;
  height: calc($w * 2);
  position: relative;
  margin-right: 10px;
  .line {
    width: $w;
    height: $h;
    position: absolute;
    background-color: rgba($color: #acacac, $alpha: .1);
  }
  .left-top {
    transform-origin: top right;
    transform: rotate(-90deg);
    // top: $h;
    left: -$w;
  }
  .right-top {
    transform-origin: top left;
    transform: rotate(90deg);
    // top: $h;
    left: $w;
  }
  .center {
    top: calc(50% - $h/2);
    width: $w;
    z-index: -1;
  }

  .left-bottom {
    bottom: 0;
    left: -$w;
    transform-origin: bottom right;
    transform: rotate(90deg);
  }
  .right-bottom {
    bottom: 0;
    left: $w;
    transform-origin: bottom left;
    transform: rotate(-90deg);
  }
  .center-bottom {
    bottom: 0;
  }
}

.red {
  background-color: red !important;
  color: red;
}
.green {
  background-color: green !important;
  color: green;
}
.yellow {
  background-color: yellow !important;
  color: yellow;
}
</style>